<template>
  <div class="applyList">
    <div class="filter">
      <div class="filterItem">
        贷款种类：
        <van-radio-group 
          v-model="choosenType"
          @change="recordPrev('choosenType')"
        >
          <van-radio 
            v-for="item in loanTypes" 
            :key="item.id" 
            :name="item.id"
            @click="delSelected('choosenType', item.id)"
          >
            <div slot="icon">
              {{item.name}}
            </div>
          </van-radio>
        </van-radio-group>
      </div>
      <div class="filterItem">
        贷款方式：
        <van-radio-group 
          v-model="choosenMode"
          @change="recordPrev('choosenMode')"
        >
          <van-radio 
            v-for="item in loanModes" 
            :key="item.id" 
            :name="item.id"
            @click="delSelected('choosenMode', item.id)"
          >
            <div slot="icon">
              {{item.name}}
            </div>
          </van-radio>
        </van-radio-group>
      </div>
    </div>
    <van-pull-refresh 
      v-model="downPullRefreshLoading" 
      @refresh="pullRefreshList"
    >
      <van-list class="loanList"
        :finished="true"
        finished-text="没有更多了"
      >
        <van-panel 
          v-for="(item, index) in filterList" 
          :key="index" 
          @click="toDetail(item.id)"
        >
          <van-row>
            <van-col class="iconWrap" span="4">
              <van-icon :name="item.icon ? item.icon : 'medel-o'" size="50px" color="rgb(248, 218, 26)" />
            </van-col>
            <van-col class="text" offset="1" span="18">
              <div class="title" v-text="item.name"></div>
              <div v-text="'额度: ' + item.price + '万元'"></div>
              <div v-text="'利率: ' + item.rate + '%'"></div>
              <div v-text="'年限: ' + item.year + '年'"></div>
              <div v-text="'用途: ' + item.uses"></div>
              <div v-text="'面向对象: ' + item.object"></div>
            </van-col>
          </van-row>
        </van-panel>
      </van-list>
    </van-pull-refresh>
    <br/>
  </div>
</template>

<script>
  import { RadioGroup, Radio, List, Panel, Row, Col, Icon, PullRefresh } from 'vant';
  import { mapState, mapMutations } from 'vuex';

  export default {
    name: 'applyList',
    components: {
      [RadioGroup.name]: RadioGroup,
      [Radio.name]: Radio,
      [List.name]: List,
      [Panel.name]: Panel,
      [Row.name]: Row,
      [Col.name]: Col,
      [Icon.name]: Icon,
      [PullRefresh.name]: PullRefresh,
    },
    data () {
      return {
        loanTypes: [],
        loanModes: [],
        choosenType: '',
        choosenMode: '',
        // 记录选中的值，在radio点击的时候与当前值做比较，实现点击选中的值，取消选中
        choosenTypePrev: '', 
        choosenModePrev: '',
        loanList: [],
        downPullRefreshLoading: false,
      }
    },
    computed: {
			...mapState ('info', [ // 带命名空间的方法
        'saleInfo'
      ]),
      filterList () { // 根据头部筛选项，筛选出结果数组
        return this.loanList.filter( (item)=> {
          let flag = 0
          if(
            this.choosenType == '' || 
            this.choosenType == item.typeId
          ) 
            flag++;
          if(
            this.choosenMode == '' || 
            this.choosenMode == item.modeId
          ) 
            flag++;
          if(flag == 2) return true;
          else return false;
        });
      }
    },
    created () {
      let province = this.$route.query.province || '',
          bankId = this.$route.query.bankId || '',
          managerId = this.$route.query.managerId || '';
      if(province != '' && bankId != '' && managerId != '')
        this.updateSaleInfo(
          Object.assign(this.saleInfo, {
            province: province,
            bankId: bankId,
            managerId: managerId
          })
        );
      this.$api.info.getType( (res) => {
        this.loanTypes = res.data[0];
        this.loanModes = res.data[1];
      });
      this.loadList();
    },
    methods: {
      ...mapMutations ('info', [ // 带命名空间的方法
        'updateSaleInfo'
      ]),
      pullRefreshList () {
        this.loadList();
      },
      loadList () {
        this.$api.info.getLoanList( (res) => {
          this.loanList = res.data;
          this.downPullRefreshLoading = false;
        });
      },
      recordPrev (method) {// 记录选中的值
        this[method + 'Prev'] = this[method];
      },
      delSelected (method, clickedId) { // 实现点击选中的值，取消选中
        if(this[method + 'Prev'] == clickedId)
          this[method] = '';
      },
      toDetail (id) {
        this.$router.push({path: '/detail', query: { id: id }});
      }
    }
  }
</script>

<style lang="scss">
  .applyList {
    .filter{
      padding: 5px 10px 10px;
      background-color: #fff;
      margin-bottom: 15px;
      box-shadow: 0px 3px 5px #efefef;
      .filterItem{
        display: flex;
        flex-direction: row;
        line-height: 34px;
        .van-radio-group{
          display: flex;
          flex-direction: row;
          .van-radio__icon{
            font-size: 14px; 
            padding: 5px 10px;
            margin: 0 5px;
            &.van-radio__icon--checked{
              background: linear-gradient(to right, rgb(75, 176, 255), rgb(97, 73, 246));
              border-radius: 5px;
              color: #fff;
            }
          }
          
        }
      }
    }
  }
</style>
